<div class="login_body" id="memberLogin">
    <div class="login_cont pub_wid">
        <h1><a href="/"><img src="/static/index/public/images/logo_b.png" /></a></h1>
        <div class="widthauto">
            <div class="login_box rg">
                <h2>账号注册</h2>
                <ul class="widthauto">
                    <li><span>手机号码</span><br />
                        <input v-model="phone" name="" type="text" placeholder="请输入手机号" class="inp"/>
                    </li>
                    <li>
                        <span>手机验证码</span><br />
                        <div class="mobile-group">
                            <input v-model="code" name="" type="text" placeholder="请输入登录密码" class="inp"/>
                            <label v-if="isSendCode" class="mobile-group-font" @click="sendCode()">获取验证码</label>
                            <label v-if='!isSendCode' class="mobile-group-font">{{maxTime}}s</label>
                        </div>
                    </li>
                    <li><span>设置密码</span><br />
                        <input v-model="password" name="" type="password" placeholder="请输入密码" class="inp"/>
                    </li>
                    <li>
                        <input name="" v-model="checkBoxSelect" type="checkbox" value="1" class="check-box-register"/>
                        注册须知<a href="/index/content/index/id/2">注册须知</a>
                    </li>

<!--                    <li>-->
<!--                        <span>请输入验证码</span><br />-->
<!--                        <div class="mobile-group">-->
<!--                            <input v-model="captcha" name="" type="text" placeholder="请输入登录密码" class="inp"/>-->
<!--                            <label class="mobile-group-img">{:captcha_img('','',140,46)}</label>-->
<!--&lt;!&ndash;                            {:captcha_img('','',140,46)}&ndash;&gt;-->

<!--                        </div>-->
<!--                    </li>-->
                    <li>
<!--                        <input name="" type="checkbox" value="" class="chos"/>-->
<!--                        记住密码<a href="#">忘记密码？</a></li><br /><br /><br />-->
                </ul>
                <h3>
                    <a  @click="postMember()">注册</a></h3>
                <p>已有账号？<a href="/index/member/login">立即登录</a></p>
            </div>
        </div>
    </div>
</div>
{include file="public/account_footer"}
<style>
    .mobile-group{
        position: relative;
    }
    .mobile-group input{
        padding-right: 120px !important;
    }
    .mobile-group-font{
        position: absolute;
        top: 0px;
        right: 0px;
        height: 52px;
        width: 140px;
        text-align: center;
        padding-top: 10px;
        cursor: pointer;
        color: #3267cb;
        box-sizing: border-box;
    }
    .mobile-group-img{
        position: absolute;
        top: 0px;
        right: 3px;
        height: 52px;
        width: 100px;
        text-align: center;
        padding-top: 10px;
        cursor: pointer;
        color: #3267cb;
        box-sizing: border-box;
    }
    .mobile-group-img img{
        height: 46px !important;
        top: 3px;
        right: 3px;
    }
</style>
<script>
    var vmMemberLogin = new Vue({
        el:'#memberLogin',
        data:{
            maxTime:60,
            captcha:'',
            phone:'',
            password:'',
            code:"",
            checkBoxSelect:0,
            isSendCode:true
        },
        methods:{
            countDown:function () {
                var el = this
                var  timer = setInterval(function () {
                    if(el.maxTime == 0){
                        clearInterval(timer)
                        el.isSendCode = true
                    }else {
                        --el.maxTime
                    }
                },1000)
            },
            sendCode:function () {
                var el = this;

                var postData = {
                    'phone':el.phone
                }

                AjaxPost(postData,'/index/sms/sendCode').then((response)=>{
                    if(response.status == 1){
                        $.customToastr('success',response.message)
                        el.isSendCode = false
                        el.countDown()
                    }
                })
            },
            postMember:function () {
                var el = this;
                if(this.checkBoxSelect == 0){
                    return $.customToastr('warning','请选中注册须知')
                }
                var postData = {
                    'phone':el.phone,
                    "code":el.code,
                    'password':el.password,
                    // "captcha": el.captcha
                }
                AjaxPost(postData,'/index/member/addMember').then((response)=>{
                    if(response.status == 1){
                        $.customToastr('success',response.message)
                        localStorage.setItem("memberPhone", response.result.phone);
                        window.location.href='/index/member/login'
                    }

                })
            }
        },
        mounted(){
        }
    })
</script>